<!DOCTYPE HTML>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>

  #canvas3 {
    width : 100px;
    height : 100px;
    border : 1px solid green;
  }

</style>
<canvas id="canvas1" width="8" height="8"></canvas>
<canvas id="canvas2" width="8" height="8"></canvas>
<canvas id="canvas3" width="8" height="8"></canvas>
<canvas id="canvas4" width="8" height="8"></canvas>
</head>
<body>
<script>
test(function(t) {
    var canvas1 = document.getElementById('canvas1');
    var canvas2 = document.getElementById('canvas2');
    var canvas3 = document.getElementById('canvas3');
    var canvas4 = document.getElementById('canvas4');
    
    var ctx1 = canvas1.getContext('2d');
    var ctx2 = canvas2.getContext('2d', {} );
    var ctx3 = canvas3.getContext('2d', { alpha: false } );
    var ctx4 = canvas4.getContext('2d', { alpha: true } );
    
    assert_equals(ctx1.getContextAttributes().alpha,true);
    var imgData1 = ctx1.getImageData(0, 0, 1, 1);
    assert_equals(imgData1.data[0],0);
    assert_equals(imgData1.data[1],0);
    assert_equals(imgData1.data[2],0);
    assert_equals(imgData1.data[3],0);
    
    assert_equals(ctx2.getContextAttributes().alpha,true);
    var imgData2 = ctx2.getImageData(0, 0, 1, 1);
    assert_equals(imgData2.data[0],0);
    assert_equals(imgData2.data[1],0);
    assert_equals(imgData2.data[2],0);
    assert_equals(imgData2.data[3],0);
    
    assert_equals(ctx3.getContextAttributes().alpha,false);
    assert_equals(ctx4.getContextAttributes().alpha,true);
    
    var imgData4 = ctx4.getImageData(0, 0, 1, 1);
    assert_equals(imgData4.data[0],0);
    assert_equals(imgData4.data[1],0);
    assert_equals(imgData4.data[2],0);
    assert_equals(imgData4.data[3],0);
    
    // Check that mutating the returned value of getContextAttributes() doesn't
    // affect the existing canvas, or the values of subsequent calls to
    // getContextAttributes().
    var attrs = ctx4.getContextAttributes();
    assert_equals(attrs.alpha,true);
    attrs.alpha = false;
    
    var imgData4 = ctx4.getImageData(0, 0, 1, 1);
    assert_equals(ctx4.getContextAttributes().alpha,true);
    assert_equals(imgData4.data[0],0);
    assert_equals(imgData4.data[1],0);
    assert_equals(imgData4.data[2],0);
    assert_equals(imgData4.data[3],0);    
}, 'Series of tests for canvas alpha');
</script>
</body>
</html>
